<template>
  <el-color-picker
    :modelValue="val"
    :show-alpha="ui.showAlpha"
    :popper-class="ui.popperClass"
    :size="ui.size"
    :color-format="ui.colorFormat"
    :predefine="ui.predefine"
    :disabled="ui.disabled"
    @update:model-value="updateValue"
  />
</template>

<script lang="ts" setup name="lc-sf-color-picker">
import { computed, inject } from "vue";
import { ColorPickerUI } from "../interface";
import { SFService } from "../sf.service";
import { TItemOption } from "../type";
const props = defineProps<TItemOption<ColorPickerUI>>();
const sf = inject<SFService>("sf-service");
const val = computed(() => {
  return sf.getVaule(props.keyPath);
});
const ui = props.service.getUI<ColorPickerUI>();
const updateValue = (cur: string) => {
  if (ui.change) {
    ui.change(cur);
  }
  sf.setVaule(props.keyPath, cur);
};
</script>

<style></style>
../types
